<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"/>

    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--前后端分离，实现前后端分离-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<table class="layui-table" id="app">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>应用</th>
        <th>子应用</th>
        <th>流程名称</th>
        <th>依赖流程</th>
        <th>执行周期</th>
        <th>执行时间</th>
        <th>创建人</th>
        <th>创建时间</th>
        <th>备注</th>
        <th>标识位</th>
        <th>报表名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="result in results">
        <td><em v-text="result.application"></em></td>
        <td><em v-text="result.subApplication"></em></td>
        <td><em v-text="result.processName"></em></td>
        <td><em v-text="result.dependentProcess"></em></td>
        <td><em v-text="result.executionCycle"></em></td>
        <td><em v-text="result.executionTime"></em></td>
        <td><em v-text="result.creator"></em></td>
        <td><em v-text="result.creatorTime"></em></td>
        <td><em v-text="result.remark"></em></td>
        <td><em v-text="result.identifyCode"></em></td>
        <td><em v-text="result.reportName"></em></td>
        <td>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon">&#xe654;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon" >&#xe642;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon" id="delete_date" @click="deleteBlood(result.application)">&#xe640;</i>
            </button>
        </td>
    </tr>
    </tbody>
</table>

<script>
    new Vue({
        el: "#app",
        data: {
            "id":'',        //id
            "keyword": '', // 搜索的关键字
            "results": [] // 后端返回的结果
        },
        created: function () {
            this.loadData();
        },
        methods: {
            //初始化
            loadData:function(){
                var keyword = this.keyword;
                console.log(keyword);
                //对后端的接口 searchHighLight
                axios.get('Blood/getBloodData').then(response => {
                    console.log(response);
                    this.results = response.data;
                })
            },
            deleteBlood(application){
                console.log(application);
                let url = "Blood/deleteBlood";
                var that=this;
                axios.delete(url,{
                    params:{
                        application:application
                    }
                })
                .then(function (ret){
                    alert(ret.data);
                    that.loadData();
                    console.log(ret.data)
                })
                //req.query.id
            }

        }
    });

</script>
</body>
</html>